<script setup lang='ts'>
import { ref, reactive,onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import setUpTime from '@/utils/setUpTime'
import { 
  GetSafetyWarning, 
  UpdateAskWarrning, 
  GetAlarmHandlingSuggestion } from '@/api/publicApi'

defineProps({
  num: {
    type: Number,
    default: 0
  }
})
// 定义变量
// 表格
// const tableData = [
//   {
//     date: '2016-05-03',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles'
//   },
//   {
//     date: '2016-05-02',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles'
//   },
//   {
//     date: '2016-05-04',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles'
//   },
//   {
//     date: '2016-05-01',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles'
//   },
//   {
//     date: '2016-05-01',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles'
//   },
//   {
//     date: '2016-05-01',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles'
//   },
//   {
//     date: '2016-05-01',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles'
//   }
// ]

const cellStyle = {
  textAlign: 'center'
}

const headStyle = {
  textAlign: 'center'
}

// 分页
const pageInfo = reactive({
  total: 100,
  pageSize: 10,
  pageNum: 1
})

// 弹框
const handleVisible = ref(false)
// 选择框
const selevtValue = ref()
// 输入框
const inputValue = ref('')

// 参数对象
const fromList = reactive( {
  BarWheelMachineCode: '',
  DeviceCode: '',
  MeasurePointCode: '',
  SafetyType: '',
  IsAck: false,
  IsError: '',
  WarningLevel: '',
  Sorting: '',
  SkipCount: 0,
  MaxResultCount: 10
})

// 
const activeObj:any = reactive({
  id: null,
  suggestionId: null,
  processTips: null
})

// 数据源
const tableData:any = ref([])
// 处理意见列表
const proposalList:any = ref([])

// 定义函数
onMounted(() => {
  getUntreatesData()
})

// 获取表格数据
const getUntreatesData = async () => {
  tableData.value = []
  proposalList.value = []
  fromList.SkipCount = (pageInfo.pageNum - 1) * pageInfo.pageSize
  fromList.MaxResultCount = pageInfo.pageSize
  fromList.Sorting = 'creationTime desc'
  fromList.IsAck = false
  let res = await GetSafetyWarning(fromList)
  pageInfo.total = res.result.totalCount
  tableData.value = [ ...res.result.items ]
  tableData.value.forEach((item:any,index:number) => {
    item.creationTime = setUpTime.formatTime(item.creationTime)
    item.warningLevel === 1 ? tableData[index].WarningLevelName = '一级报警' : item.warningLevel === 2 ? tableData[index].WarningLevelName = '二级报警' : ' '
    switch(item.type){
    case 0:
      tableData[index].typeName = '无'
      break
    case 1:
      tableData[index].typeName = '一氧化碳'
      break
    case 2:
      tableData[index].typeName = '甲烷'
      break
    case 3:
      tableData[index].typeName = '粉尘'
      break
    case 4:
      tableData[index].typeName = '烟感'
      break
    case 5:
      tableData[index].typeName = '风速'
      break
    case 6:
      tableData[index].typeName = '风压'
      break
    case 7:
      tableData[index].typeName = '设备振动'
      break
    case 8:
      tableData[index].typeName = '设备温度'
      break
    case 9:
      tableData[index].typeName = '结构振动'
      break
    case 10:
      tableData[index].typeName = '结构应力'
      break
    }
  })
  console.log('表格数据---->', res)
  // 获取处理意见
  let res1 = await GetAlarmHandlingSuggestion()
  console.log('处理意见列表------>',res1)
  proposalList.value = [ ...res1.result.items ]
  
}

// 确认修改
const updateAsk = () => {
  UpdateAskWarrning({
    id: activeObj.id,
    suggestionId: activeObj.suggestionId,
    processTips: activeObj.processTips
  }).then(res => {
    if (res.success) {
      ElMessage({
        // message: `${res.message}`,
        message: '已确认！',
        type: 'success'
      })
      handleVisible.value = false
      getUntreatesData()
    } else {
      ElMessage({
        // message: `${res.message}`,
        message: '处理失败',
        type: 'warning'
      })
    }
  })
}

// 改变每页数量
const handlePlanSizeChange = (val: number) => {
  pageInfo.pageSize = val
  getUntreatesData()
}
// 切换页码
const handlePlanCurrentChange = (val: number) => {
  pageInfo.pageNum = val
  getUntreatesData()
}

// 向外暴露的函数与变量
defineExpose({
  getUntreatesData
})
</script>

<template>
  <div class="table-box">
    <el-table
      :cell-style="cellStyle"
      :header-cell-style="headStyle"
      :data="tableData"
      max-height="640"
      size="small"
    >
      <el-table-column
        prop="date"
        label="位置"
      />
      <el-table-column
        prop="date"
        label="故障类型"
      />
      <el-table-column
        prop="address"
        label="故障等级"
      />
      <el-table-column
        prop="address"
        label="故障时间"
      />
      <el-table-column
        prop="name"
        label="操作"
      >
        <template #default>
          <div class="btn-box">
            <div
              class="treate-btn"
              @click="handleVisible = true"
            >
              处理
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="pagination-box">
    <el-pagination
      v-model:current-page="pageInfo.pageNum"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handlePlanSizeChange"
      @current-change="handlePlanCurrentChange"
    />
  </div>
  <el-dialog
    v-model="handleVisible"
    width="480"
  >
    <template #default>
      <div class="info-box">
        <div class="left-box">
          <div>位置</div>
          <div>故障类型</div>
          <div>故障等级</div>
        </div>
        <div class="right-box">
          <div>
            回转平台下部左
          </div>
          <div>
            机构应力
          </div>
          <div>
            2
          </div>
        </div>
      </div>
      <div class="opinions-box">
        <div class="title-box">
          处理意见
        </div>
        <div class="select-box">
          <el-select
            v-model="selevtValue"
            placeholder="请选择"
            class="opinions-select"
          >
            <el-option
              v-for="item in proposalList"
              :key="item.id + ''"
              :label="item.suggestion"
              :value="item.id + ''"
            />
          </el-select>
        </div>
      </div>
      <div class="input-box">
        <el-input
          v-model="inputValue"
          placeholder="请输入内容"
          type="textarea"
        />
      </div>
    </template>
    <template #footer>
      <el-button @click="handleVisible = false">
        取 消
      </el-button>
      <el-button
        type="primary"
        @click="updateAsk"
      >
        确 定
      </el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang=scss>
.table-box {
  padding: 0 15px;
}

.pagination-box {
  margin-top: 10px;
  padding: 0 15px;
}

.btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  .treate-btn {
    width: 56px;
    height: 28px;
    color: #fff;
    background-color: #409eff;
    border-radius: 5px;

    &:hover {
      cursor: pointer;
    }
  }
}

.info-box {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 90px;

  /* border: 1px solid red; */

  >div {
    height: 100%;
    border: 1px solid #000;
    border-bottom: none;

    >div {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 30px;
      color: #000;
      font-size: 18px;
      border-bottom: 1px solid #000;
    }
  }

  .left-box {
    width: 100px;
    border-right: none;
  }

  .right-box {
    width: 250px;
  }
}

.opinions-box {
  display: flex;
  width: 100%;
  height: 40px;
  margin-top: 10px;

  /* border: 1px solid red; */

  >div {
    height: 100%;

    /* border: 1px solid green; */
  }

  .title-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    color: #000;
  }

  .select-box {
    width: 360px;
  }
}

.input-box {
  width: 340px;
  margin-top: 10px;
  margin-left: 100px;

  /* border: 1px solid red; */
}
</style>
<style lang="scss">
.opinions-select {
  width: 100%;
}
</style>